<style scoped>
.thisImg{
  vertical-align: middle;
}
.thisText{
  display: inline-block;
  margin-left:10px;
  font-size: 12px;
  color:rgb(96, 97, 97);
}
</style>
<template>
  <div class="logo">
    <div class="top">
      <span>注册</span>
    </div>
    <el-form
      :label-position="'right'"
      :rules="rules2"
      :model="ruleForm2"
      status-icon
      ref="ruleForm2"
      label-width="80px"
      class="demo-ruleForm"
    >
      <el-form-item label="用户名" prop="username">
        <el-input type="text" v-model="ruleForm2.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pass">
        <el-input type="text" v-model="ruleForm2.pass"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="affirmpwd">
        <el-input type="text" v-model="ruleForm2.affirmpwd"></el-input>
      </el-form-item>
      <el-form-item>
        <!-- 直接将图片引入即可 -->
        <img class="thisImg" ref="thisImg"  @click="updateimg" :src="$svg_num" alt="svg验证码">
        <span class="thisText">点击图片切换</span>
      </el-form-item>
      <el-form-item label="验证码" prop="yzm">
       <el-input type="text" v-model="ruleForm2.yzm"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="warning" @click="zhuce('ruleForm2')">立即注册</el-button>
      </el-form-item>
      <el-form-item class="text">
        已有账号? <a href="javascript:;" @click="gotodenglu">前往登录</a>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
    data() {
      var isUser = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('用户不能为空'));
        }
        this.$http.post('/api/regist/get/user',{username:value}).then((data)=>{
          if(data.data.code ==0){
            callback()
          }else{
            callback(new Error(data.data.msg))
          }
        });
      };
       var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm2.affirmpwd !== '') {
            this.$refs.ruleForm2.validateField('affirmpwd');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm2.pass) {
          console.log(value,this.ruleForm2.pass)
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        ruleForm2: {
          pass: '',
          username: '',
          affirmpwd:'',
          yzm:''
        },
        rules2: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
            {validator:isUser, trigger: 'blur'}
          ],
          pass: [
            {required: true, validator:validatePass, trigger: 'blur' }
          ],
          affirmpwd:[
            {required: true, validator:validatePass2, trigger: 'blur' }
          ]
        }
      };
    },
    methods:{
      // 点击切换验证图
      updateimg(){
        let date = new Date();
        let time = date.getTime();
        // 图片的src属性，拼接每次产生的时间戳
        console.log(this.$refs.thisImg)
        this.$refs.thisImg.setAttribute("src",`${this.$svg_str}?id=${time}`);
      },
      /* 
        调注册接口
        注册成功回调里面，提示注册成功，注册信息清空，resetFiled
        显示登录页面
      */
      zhuce(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$http.post('/api/regist',{
              username:this.ruleForm2.username,
              password:this.ruleForm2.pass,
              repassword:this.ruleForm2.affirmpwd,
              yzm:this.ruleForm2.yzm
            }).then(({data})=>{
               if(data.code==0){
                  this.$message({
                    message: '恭喜你，注册成功~',
                    type: 'success'
                  });
                  this.gotodenglu();
               }else{
                 // 验证失败更新验证码
                  this.updateimg();
                  this.$message({
                    message: data.msg,
                    type: 'warning'
                  });
               }
            }).catch(err => {
              console.log(err);
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      gotodenglu(){
          this.$emit('gotudenglu')
      }
    }
};
</script>